<template>
  <div class="van-calendar-dict">
    <van-calendar-dict label="单选" input-align="right" v-model="value1" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="单选赋值" v-model="value11" @dictChange="handleChange" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="区间" input-align="right" type="range" v-model="value2" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="区间赋值" v-model="value22" type="range" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="多选" input-align="right" type="multiple" v-model="value3" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
    <van-calendar-dict label="多选赋值" v-model="value33" type="multiple" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="日期间隔符" spacer="/" input-align="right" v-model="value4" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="区间日期间隔符" label-width="120px" dateSpacer="~" type="range" spacer="/" input-align="right" v-model="value5" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>
  
    <van-calendar-dict label="多个日期展示" :formateShowValue="formateShowValue" v-model="value6" type="multiple" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="多个日期展示" defaultVal="好运来" v-model="value7" type="multiple" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')"></van-calendar-dict>

    <van-calendar-dict label="插槽" defaultVal="好运来" v-model="value8" input-align="right" placeholder="请选择" :min-date="new Date('2022, 01, 01')">
      <template v-slot:calendarTopInfo>
        top
      </template>
      <template v-slot:calendarBottomInfo>
        底部
      </template>
    </van-calendar-dict>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value11: "2022-07-04",
      value2: "",
      value22: ["2022.01.04", "2022.01.20"],
      value3: "",
      value33: ["2022.01.04", "2022.01.20"],
      value4: "",
      value5: "",
      value6: [],
      value7: [],
      value8: ""
    }
  },
  created() {
    setTimeout(() => {
      this.value11 = "2023-06-30"
    }, 2000)
  },  
  methods: {
    formateShowValue(datas) {
      return datas&&datas.join(",") || ""
    },
    handleChange(val) {
      console.log(this.value11)
    }
  }
}
</script>

<style>

</style>